<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<body>
<div class="card">
    <div class="card-header">
        <div>
            <div style="float:left;">
                <span style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">用户管理</span>
            </div>
            <div style="float: right;margin-right: 7%">
                <button type="button" data-feather="plus-circle" data-toggle="modal"
                        data-target="#defaultModalPrimary" onclick="initAddModel()"></button>
            </div>
        </div>
        <table class="table table-striped" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th style="width:15%;">序号</th>
                <th style="width:15%;">用户名</th>
                <th style="width:15%">姓名</th>
                <th style="width:15%">家庭住址</th>
                <th style="width:15%">联系电话</th>
                <th class="d-none d-md-table-cell" style="width:15%">创建时间</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody id="tbodyDiv">
            <tr>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--模态框-->

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="modelHead">
                <h5 class="card-title" style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">
                    用户详细</h5>
            </div>
            <div class="modal-body m-3">
                <div class="card-body" id="modelDiv"
                     style="font-weight: bold;font-size: 15px;text-shadow: 2px 2px 2px #cccccc;margin-top: -6%">
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" placeholder="姓名">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">密码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="password" placeholder="密码">
                        </div>
                    </div>
                    <fieldset class="mb-3" id="is_pregnancy_or_estrus">
                        <div class="row">
                            <label class="col-form-label col-sm-2 text-sm-right pt-sm-0">性别</label>
                            <div class="col-sm-10">
                                <label class="form-check">
                                    <input name="radio-4" type="radio" id='1' class="form-check-input" checked>
                                    <span class="form-check-label">男</span>
                                </label>
                                <label class="form-check">
                                    <input name="radio-4" type="radio" id='2' class="form-check-input">
                                    <span class="form-check-label">女</span>
                                </label>
                            </div>
                        </div>
                    </fieldset>

                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">家庭住址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="home_address" placeholder="家庭住址">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="age" placeholder="年龄">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">联系电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="phone" placeholder="联系电话">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">创建时间</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="create_date" placeholder="创建时间">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">创建人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="create_user" placeholder="创建人">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="modelAction">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addUserData()">提交</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../cwjy/js/ajaxAll.js"></script>
<script type="text/javascript">

    let userDataCache = [];

    function getUserPage() {
        let url = "http://localhost:8888/cwjy/user/getPage";
        let json = {};
        $.ajax({
            type: 'post',
            async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: url,    //请求发送到Servlet
            contentType: 'application/json;charset=UTF-8',//指定消息请求类型
            data: JSON.stringify(json),
            timeout: 10000,    //超时10s
            success: function (res) {
                userDataCache = res.data
                forEachUserData();
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert('数据请求失败!');
            }
        });
    }

    getUserPage();

    function forEachUserData() {
        let tbodyDiv = "";
        for (let i = 0; i < userDataCache.length; i++) {
            let temp = "    <tr>\n" +
                "                <td>" + (i + 1) + "</td>\n" +
                "                <td>" + userDataCache[i].username + "</td>\n" +
                "                <td>" + userDataCache[i].name + "</td>\n" +
                "                <td>" + userDataCache[i].home_address + "</td>\n" +
                "                <td>" + userDataCache[i].phone + "</td>\n" +
                "                <td class=\"d-none d-md-table-cell\">" + userDataCache[i].create_date + "</td>\n" +
                "                <td class=\"table-action\">\n" +
                "                    <a href=\"#\"><i class=\"align-middle\" data-feather=\"eye\" onclick=\"initDetailedModel('" + userDataCache[i].id + "')\"\n" +
                "                                   data-toggle=\"modal\" data-target=\"#defaultModalPrimary\"></i></a>\n" +
                "                    <a href=\"#\"><i class=\"align-middle\" data-feather=\"edit-2\" onclick=\"initUpdateModel('" + userDataCache[i].id + "')\" data-toggle=\"modal\"\n" +
                "                                   data-target=\"#defaultModalPrimary\"></i></a>\n" +
                "                    <a href=\"#\"><i class=\"align-middle\" data-feather=\"trash\" onclick=\"deleteUserData('" + userDataCache[i].id + "')\"></i></a>\n" +
                "                </td>\n" +
                "            </tr>";
            tbodyDiv += temp;
        }
        $('#tbodyDiv').html(tbodyDiv)
    }


    function initAddModel() {
        let modelHead = "   <h5 class=\"card-title\" style=\"font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;\">\n" +
            "                    用户增加</h5>";
        let modelDiv = " <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">姓名</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\" id=\"name\" placeholder=\"姓名\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">用户名</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\" id=\"username\" placeholder=\"用户名\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">密码</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\" id=\"password\" placeholder=\"密码\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <fieldset class=\"mb-3\" id=\"is_pregnancy_or_estrus\">\n" +
            "                        <div class=\"row\">\n" +
            "                            <label class=\"col-form-label col-sm-2 text-sm-right pt-sm-0\">性别</label>\n" +
            "                            <div class=\"col-sm-10\">\n" +
            "                                <label class=\"form-check\">\n" +
            "                                    <input name=\"radio-4\" type=\"radio\" id='1' class=\"form-check-input\" checked>\n" +
            "                                    <span class=\"form-check-label\">男</span>\n" +
            "                                </label>\n" +
            "                                <label class=\"form-check\">\n" +
            "                                    <input name=\"radio-4\" type=\"radio\" id='2' class=\"form-check-input\">\n" +
            "                                    <span class=\"form-check-label\">女</span>\n" +
            "                                </label>\n" +
            "                            </div>\n" +
            "                        </div>\n" +
            "                    </fieldset>\n" +
            "\n" +
            "                    <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">家庭住址</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\" id=\"home_address\" placeholder=\"家庭住址\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">年龄</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\" id=\"age\" placeholder=\"年龄\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">联系电话</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\" id=\"phone\" placeholder=\"联系电话\">\n" +
            "                        </div>\n" +
            "                    </div>";
        let modelAction = " <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">关闭</button>\n" +
            "                <button type=\"button\" class=\"btn btn-primary\" id = 'submitAddOrUpdate' onclick=\"addUserData()\">提交</button>";

        $("#modelHead").html(modelHead)
        $("#modelDiv").html(modelDiv)
        $("#modelAction").html(modelAction)
        $('#submitAddOrUpdate').attr("onclick", "addUserData()")
    }


    function initDetailedModel(id) {
        let data = getDataIdData(userDataCache, id)
        let modelHead = " <h5 class=\"card-title\" style=\"font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;\">\n" +
            "                    用户详细</h5>";
        let modelDiv = "   <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">创建时间</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\" id=\"create_date\" placeholder=\"创建时间\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"mb-3 row\">\n" +
            "                        <label class=\"col-form-label col-sm-2 text-sm-right\">创建人</label>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input  type=\"text\" class=\"form-control\" id=\"create_user\" placeholder=\"创建人\">\n" +
            "                        </div>\n" +
            "                    </div>";
        let modelAction = " <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">关闭</button>";
        initAddModel();
        $("#modelHead").html(modelHead)
        $("#modelDiv").append(modelDiv)
        $("#modelAction").html(modelAction)
        $('#name').val(data.name);
        $('#username').val(data.username);
        $('#password').val(data.password);
        $('#home_address').val(data.home_address);
        $('#phone').val(data.phone);
        $('#age').val(data.age);
        $('#create_date').val(data.create_date);
        $('#create_user').val(data.create_user);
        $('#' + data.sex).attr("checked", "checked")
        $('#modelDiv input').each(function () {
            $(this).attr("disabled", "disabled")
        })

    }

    function initUpdateModel(id) {
        let data = getDataIdData(userDataCache, id)
        initAddModel();
        $('#name').val(data.name);
        $('#username').val(data.username);
        $('#password').val(data.password);
        $('#home_address').val(data.home_address);
        $('#phone').val(data.phone);
        $('#age').val(data.age);
        $('#create_date').val(data.create_date);
        $('#create_user').val(data.create_user);
        $('#' + data.sex).attr("checked", "checked")
        $('#submitAddOrUpdate').attr("onclick", "updateUserData('" + data.id + "')")
    }

    function updateUserData(id) {
        if (confirm("是否确定修改!")) {
            let name = $('#name').val();
            let username = $('#username').val();
            let password = $('#password').val();
            let home_address = $('#home_address').val();
            let phone = $('#phone').val();
            let age = $('#age').val();
            let sex_radio = $('input:radio[name="radio-4"]:checked');
            let sex = sex_radio[0].id;
            let url = "http://localhost:8888/cwjy/user/updateByPrimaryKeySelective";
            let json = {
                name: name, username: username, password: password, home_address: home_address,
                phone: phone, age: age, sex: sex, id: id
            };
            let success = "修改成功";
            let error = "修改失败";
            ajaxUnifiedCallUpdateAndAdd(url, json, success, error)
        }
    }


    function deleteUserData(id) {
        if (confirm("是否确定删除!")) {
            let url = "http://localhost:8888/cwjy/user/deleteByPrimaryKey";
            let json = {id: id};
            let success = "删除成功";
            let error = "删除失败";
            ajaxUnifiedCallUpdateAndAdd(url, json, success, error)
        }
    }


    function addUserData() {
        let name = $('#name').val();
        let username = $('#username').val();
        let password = $('#password').val();
        let home_address = $('#home_address').val();
        let phone = $('#phone').val();
        let age = $('#age').val();
        let sex_radio = $('input:radio[name="radio-4"]:checked');
        let sex = sex_radio[0].id;
        let url = "http://localhost:8888/cwjy/user/insert";
        let json = {
            name: name, username: username, password: password, home_address: home_address,
            phone: phone, age: age, sex: sex
        };
        let success = "增加成功";
        let error = "增加失败";
        ajaxUnifiedCallUpdateAndAdd(url, json, success, error)
    }


</script>

</body>
</html>